// 当年客户销量对比
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  var salvProName = [
    "客户ABC",
    "客户BEF",
    "客户CDE",
    "客户DFE",
    "客户EDE",
    "测试FEF",
    "测试CDE",
    "测试DFE",
    "测试EDE",
    "测试FEF",
  ];
  var salvProValue = [239, 181, 154, 144, 135, 117, 110, 89, 70, 60];
  var saleNames = salvProName.slice(0, 5);
  var saleValues = salvProValue.slice(0, 5);
  var salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0]);
  }
  option = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: saleNames,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
          },
        },
        data: saleValues,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(57,89,255,1)",
              },
              {
                offset: 1,
                color: "rgb(46,200,207,1)",
              },
            ]),
          },
        },
        barWidth: 15,
        data: saleValues,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 15,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(24,31,68,1)",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };
  // 3. 配置项和数据给我们的实例化对象
  //myChart.setOption(option);
  myChart.setOption(option);
  let count = 5;
  function playSale() {
    saleNames.push(salvProName[count]);
    saleValues.push(salvProValue[count]);
    saleNames.shift();
    saleValues.shift();
    if (count === salvProName.length - 1) {
      count = -1;
    }
    count++;
    myChart.setOption(option);
  }
  // setInterval(function () {

  // }, 2000);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
